<template>
    <div class="chooseApiLayoutRoll">
        <div class="viewContent title">标题：{{contentValue.title}}</div>
        <div class="viewContent">简要描述 ：{{contentValue.description}}</div>
        <div class="viewContent">请求URL ：{{contentValue.url}}</div>
        <div class="viewContent">请求方式 ：<span :class="typeClass[contentValue.type]">{{contentValue.type}}</span></div>

        <div class="viewContent folderTitle" v-if="contentValue.header">
            <div class="folderTitle namebox" @click="status.header  = !status.header">
                <i class=" el-icon-s-order"></i> header 参数 ( JSON )
                <span class="switchIcon">
                    <i class="el-icon-arrow-up" :style="{'transform': status.header ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
                </span>
            </div>
            <pre class="codeMessage" v-if="status.header">{{contentValue.header}}</pre>
        </div>

        <div class="viewContent folderTitle" v-if="contentValue.body && contentValue.bodyType == 0">
            <div class="folderTitle namebox" @click="status.body  = !status.body">
                <i class="el-icon-s-order"></i> body 参数 ( JSON )
                <span class="switchIcon">
                    <i class="el-icon-arrow-up" :style="{'transform': status.body ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
                </span>
            </div>
            <pre class="codeMessage" v-if="status.body">{{contentValue.body}}</pre>
        </div>

        <div class="viewContent folderTitle" v-if="contentValue.formData && contentValue.bodyType == 1">
            <div class="folderTitle namebox" @click="status.formData  = !status.formData">
                <i class="el-icon-s-order"></i> formData 参数
                <span class="switchIcon">
                    <i class="el-icon-arrow-up" :style="{'transform': status.formData ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
                </span>
            </div>
            <pre class="codeMessage" v-if="status.formData">{{contentValue.formData}}</pre>
        </div>

        <div class="viewContent folderTitle" v-if="contentValue.query">
            <div class="folderTitle namebox" @click="status.query  = !status.query">
                <i class="el-icon-s-order"></i> query 参数
                <span class="switchIcon">
                    <i class="el-icon-arrow-up" :style="{'transform': status.query ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
                </span>
            </div>
            <pre class="codeMessage" v-if="status.query">{{contentValue.query}}</pre>
        </div>

        <div class="viewContent folderTitle" v-if="contentValue.rest">
            <div class="folderTitle namebox" @click="status.rest  = !status.rest">
                <i class="el-icon-s-order"></i> rest 参数
                <span class="switchIcon">
                    <i class="el-icon-arrow-up" :style="{'transform': status.rest ? 'rotateZ(0deg)':'rotateZ(180deg)'}"></i>
                </span>
            </div>
            <pre class="codeMessage" v-if="status.rest">{{contentValue.rest}}</pre>
        </div>
        <div class="viewContent title">返回值 ：</div>
        <el-dropdown class="ipBox" @command="IPSelect" placement="bottom-start" trigger="click">
            <el-button size="small">
                <span class="ip">{{ActiveIP ? ActiveIP : '请选择地址'}}</span>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in urlArray" :key="index" :command="index">
                    <span class="ip">
                        {{item.title + ' : ' + item.type + item.str + (item.port == 80 ? '' : ':' + item.port)}}
                    </span>
                </el-dropdown-item>
                <el-dropdown-item command="clear" v-if="ActiveIP"><span class="ip">清空</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-button size="small" type="primary" @click="sendRequester">
            <span>Send</span>
        </el-button>
        <el-button size="small" type="primary" @click="outputEvent" style="float:right;margin:0 10px 0 0">
            <span>导入到模板</span>
        </el-button>
        <div class="response">
            <pre class="codeMessage">{{outPut}}</pre>
        </div>

    </div>
</template>

<script>
import { mapState } from 'vuex';
import commonEvent from '../../../../assets/commonEvent'


export default {
    props: ['setMarkdownForm'],
    data() {
        return {
            ActiveIP: '',
            status: {
                header: false,
                body: false,
                formData: false,
                query: false,
                rest: false,
            },
            typeClass: {
                GET: 'text_green',
                POST: 'text_orange',
                PUT: 'text_blue',
                DEL: 'text_red'
            },
            contentValue: {
                title: '',
                type: '',
                description: '',
                url: '',
                bodyType: '',
                header: '',
                body: '',
                formData: '',
                query: '',
                rest: '',
                response: '',
                responseTyep: '',
                sendOptions: {},
                looksLikeHtml: false,
            },
            oldValue: {},
            outPut: '',
            requestEvent: null,
        }
    },
    computed: {
        ...mapState("url", {
            urlArray: state => state.urlArray,
            activeUrl: state => state.activeUrl,
        }),
    },
    watch: {
        activeUrl(newValue, oldValue) {
            if (newValue) {
                this.ActiveIP = newValue.type + newValue.str + (newValue.port == 80 ? '' : ':' + newValue.port)
            } else {
                this.ActiveIP = ''
            };
        },
    },
    mounted() {
        if (this.activeUrl) {
            this.ActiveIP = this.activeUrl.type + this.activeUrl.str + (this.activeUrl.port == 80 ? '' : ':' + this.activeUrl.port)
        };
    },
    methods: {
        IPSelect(str) {
            if (str == 'clear') {
                this.$store.dispatch('url/setActiveUrl', null);
            } else {
                this.$store.dispatch('url/setActiveUrl', this.urlArray[str]);
            };
        },
        setData(data) {
            this.status = {
                header: false,
                body: false,
                formData: false,
                query: false,
                rest: false,
            };
            this.contentValue = {
                title: '',
                type: '',
                description: '',
                url: '',

                bodyType: '',
                header: '',
                body: '',
                formData: '',
                query: '',
                rest: '',

                response: '',
                responseTyep: '',
                sendOptions: {},
                looksLikeHtml: false,
            };
            var _data = JSON.parse(JSON.stringify(data));
            this.oldValue = JSON.parse(JSON.stringify(data));
            this.contentValue.sendOptions = _data;
            this.contentValue.title = _data.title;
            this.contentValue.type = _data.type == 'DEL' ? 'DELETE' : _data.type;
            this.contentValue.description = _data.description;
            this.contentValue.url = _data.url;
            this.contentValue.body = _data.body;
            this.contentValue.query = _data.query;
            this.contentValue.header = _data.header;
            this.contentValue.rest = _data.rest;
            this.contentValue.bodyType = _data.bodyType;

            if (_data.fromdata) {
                var formDataSrt = JSON.parse(_data.fromdata);
                for (let i = 0; i < formDataSrt.length; i++) {
                    const element = formDataSrt[i];
                    this.contentValue.formData += '<input name="' + element.key + '" type="' + (element.type == 'text' ? 'text' : 'file') + '" value="' + element.value + '">' + '\n'
                };
            };
            this.outPut = '';
            if (this.requestEvent) {
                this.requestEvent.abort();
                this.requestEvent = null;
            };
        },
        sendRequester() {
            commonEvent.checkRequestlegal(this.oldValue, this.ActiveIP, (error, data) => {
                if (error) {
                    this.$alert(error);
                } else {
                    this.requestEvent = commonEvent.requestEvent(data, JSON.parse(this.oldValue.response), (resEventData) => {
                        this.outPut = resEventData.output;
                        this.looksLikeHtml = resEventData.looksLikeHtml;
                    });
                }
            });
        },
        outputEvent() {
            var str = '';
            str += '## 接口名称： ' + this.contentValue.title + '\n';
            str += '### 接口描述：\n';
            str += '> ' + this.contentValue.description + '\n';
            str += '#### URL：[ ' + this.contentValue.type + ' ] '  + this.contentValue.url + '\n';
            if (this.contentValue.header) {
                str += '###### header 参数\n\n';
                str += '```js\n' + this.contentValue.header + '\n```\n\n';
            }

            if (this.contentValue.body && this.contentValue.bodyType == 0) {
                str += '###### Body参数(Post data 参数)\n\n';
                str += '```js\n' + this.contentValue.body + '\n```\n\n';
            }

            if (this.contentValue.fromdata && this.contentValue.bodyType == 1) {
                str += '###### formData参数(form 表单传参)\n\n';
                str += '```js\n' + this.contentValue.fromdata + '\n```\n\n';
            }

            if (this.contentValue.query) {
                str += '###### query参数(url参数)\n\n';
                str += '```js\n' + this.contentValue.query + '\n```\n\n';
            }

            if (this.contentValue.rest) {
                str += '###### rest参数(动态URl传参)\n\n';
                str += '```js\n' + this.contentValue.rest + '\n```\n\n';
            }

            if (this.outPut) {
                str += '#### 返回值示例\n\n';
                str += '```' + (this.contentValue.looksLikeHtml ? 'html' : 'js') + '\n' + this.outPut + '\n```\n\n';
            };
            str += '\n\n';
            // console.log(str);
            // console.log(this.setMarkdownForm);
            this.setMarkdownForm(str);
        },
    },
}
</script>

<style scoped>
    .chooseApiLayoutRoll { position: absolute; left: 5px; right: 40px; top: 0; bottom: 0; border-left: 1px solid #eee; padding: 0 0 0 10px; overflow-y: auto;}
    .switchIcon { float: right; }
    .codeMessage {font-family:consola !important; padding: 5px;  user-select: text; margin: 5px; border: 1px solid #eee; border-radius: 3px; color:#666; background: rgba(255, 255, 255,0.8);}
    .viewContent { margin: 5px 0; padding: 3px 0; border-radius: 5px; }
    .folderTitle { background: #59a7ff; padding: 3px 10px; color: #fff; cursor: pointer; }
</style> 